<div class="page-container">
  <!-- 页面标题和操作区 -->
  <div class="page-header">
    <div class="page-title">{{ isEditMode ? '编辑调拨单' : '新增调拨单' }}</div>
  </div>

  <form [formGroup]="allocationForm" class="allocation-form">
    <!-- 基本信息 -->
    <div class="card custom-card">
      <div class="card-header">基本信息</div>
      <div class="card-body">
        <div class="form-group">

          <div class="form-item">
            <label class="form-label required">调拨单号</label>
            <div class="form-control">
              <input type="text" class="form-select" formControlName="allocationNo" placeholder="系统自动生成" readonly />
            </div>
          </div>
          <div class="form-item">
            <label class="form-label required">调拨类型</label>
            <div class="form-control">
              <select class="form-select" formControlName="allocationType">
                <option value="">请选择调拨类型</option>
                <option *ngFor="let type of allocationTypes" [value]="type.value">{{type.label}}</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-item">
            <label class="form-label required">调拨日期</label>
            <div class="form-control">
              <input type="date" class="form-select" formControlName="applicationDate" placeholder="请选择日期" [value]="allocationForm.get('applicationDate')?.value" />
            </div>
          </div>
          <div class="form-item">
            <label class="form-label required">调出仓库</label>
            <div class="form-control with-button">
              <select class="form-select" formControlName="fromWarehouse">
                <option value="">请选择调出仓库</option>
                <option *ngFor="let warehouse of warehouseList" [value]="warehouse.value">{{warehouse.label}}</option>
              </select>
              <button type="button" class="btn btn-secondary setup-btn" title="设置仓库信息">
                <i class="fas fa-cog"></i> 设置
              </button>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-item">
            <label class="form-label required">调入仓库</label>
            <div class="form-control with-button">
              <select class="form-select" formControlName="toWarehouse">
                <option value="">请选择调入仓库</option>
                <option *ngFor="let warehouse of warehouseList" [value]="warehouse.value">{{warehouse.label}}</option>
              </select>
              <button type="button" class="btn btn-secondary setup-btn" title="设置仓库信息">
                <i class="fas fa-cog"></i> 设置
              </button>
            </div>
          </div>
          <div class="form-item">
            <label class="form-label required">经办人</label>
            <div class="form-control">
              <select class="form-select" formControlName="handler">
                <option value="">请选择经办人</option>
                <option *ngFor="let handler of handlerList" [value]="handler.label">{{handler.label}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-item full-width">
            <label class="form-label">备注</label>
            <div class="form-control">
              <textarea rows="4" class="form-select" formControlName="remarks" placeholder="请输入备注信息"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 调拨明细 -->
    <div class="card custom-card">
      <div class="card-header">调拨明细</div>
      <div class="card-body">
        <div class="table-operations">
          <button type="button" class="btn btn-primary btn-green" (click)="openProductModal()" title="添加产品">
            <i class="fas fa-plus"></i> 添加
          </button>
          <button type="button" class="btn btn-danger btn-red" [disabled]="selectedRowIds.length === 0" (click)="batchDeleteRows()" title="移除选中产品">
            <i class="fas fa-trash"></i> 移除
          </button>
        </div>
        
        <div class="table-responsive">
          <table class="table table-bordered custom-table">
            <thead>
              <tr>
                <th style="width: 50px">
                  <input type="checkbox" [checked]="isAllSelected" [indeterminate]="isIndeterminate" (change)="onAllChecked($event.target.checked)">
                </th>
                <th nzWidth="60px">序号</th>
                <th nzWidth="180px">产品名称</th>
                <th nzWidth="120px">产品编码</th>
                <th nzWidth="120px">规格型号</th>
                <th nzWidth="80px">单位</th>
                <th nzWidth="120px">产品类型</th>
                <th nzWidth="150px">调出仓库库存</th>
                <th nzWidth="150px">调入仓库库存</th>
                <th nzWidth="120px">调拨数量</th>
                <th nzWidth="120px">入库单价</th>
                <th nzWidth="120px">调拨金额</th>
                <th nzWidth="120px">备注</th>
                <th nzWidth="80px">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="pagedData.length === 0">
                <td colspan="14" class="text-center py-4 text-muted">
                  <i class="fas fa-inbox me-2"></i>暂无数据，请点击"添加"按钮选择产品
                </td>
              </tr>
              <tr *ngFor="let data of pagedData; let i = index">
                <td>
                  <input type="checkbox" [checked]="isItemSelected(data.id)" (change)="onItemChecked(data.id, $event.target.checked)">
                </td>
                <td>{{ i + 1 }}</td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.productName" [ngModelOptions]="{standalone: true}" readonly />
                </td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.productCode" [ngModelOptions]="{standalone: true}" readonly />
                </td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.specification" [ngModelOptions]="{standalone: true}" readonly />
                </td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.unit" [ngModelOptions]="{standalone: true}" readonly />
                </td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.productType" [ngModelOptions]="{standalone: true}" readonly />
                </td>
                <td>
                  <div class="stock-cell" [class.stock-warning]="data.fromWarehouseStock < data.allocationQuantity">
                    <span>{{ data.fromWarehouseStock || 0 }}</span>
                    <span *ngIf="data.fromWarehouseStock < data.allocationQuantity" class="stock-alert" title="库存不足">
                      <i class="fas fa-exclamation-triangle"></i>
                    </span>
                  </div>
                </td>
                <td>{{ data.toWarehouseStock || 0 }}</td>
                <td>
                  <input 
                    type="number"
                    class="form-control" 
                    [(ngModel)]="data.allocationQuantity"
                    [ngModelOptions]="{standalone: true}"
                    min="1"
                    step="1"
                    (input)="calculateAmount(data)"
                    (blur)="calculateAmount(data)"
                  />
                </td>
                <td>
                  <input 
                    type="number"
                    class="form-control"
                    [(ngModel)]="data.unitPrice"
                    [ngModelOptions]="{standalone: true}"
                    readonly
                  />
                </td>
                <td class="amount-cell">{{ data.allocationAmount | number: '1.2-2' }}</td>
                <td>
                  <input type="text" class="form-control" [(ngModel)]="data.remarks" [ngModelOptions]="{standalone: true}"  />
                </td>
                <td>
                  <button type="button" class="btn btn-danger btn-sm" (click)="deleteRow(data.id)" title="移除此产品">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td></td>
                <td colspan="8" class="text-right">合计：</td>
                <td class="fw-bold">{{ totalQuantity }}</td>
                <td></td>
                <td class="fw-bold">{{ totalAmount | number: '1.2-2' }}</td>
                <td></td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    
    <!-- 附件上传 -->
    <div class="card custom-card">
      <div class="card-header">上传附件</div>
      <div class="card-body">
        <div class="upload-container">
          <input type="file" id="file-upload" multiple style="display: none;" (change)="handleFileUpload($event)" />
          <label for="file-upload" class="btn btn-primary btn-blue upload-btn">
            <i class="fas fa-upload"></i> 上传
          </label>
          <div class="upload-hint">支持doc, pdf, rar等格式的文件,单个文件上传最大200MB。</div>
          <div class="file-list" *ngIf="fileList && fileList.length > 0">
            <div class="file-item" *ngFor="let file of fileList">
              <div class="file-info">
                <span class="file-icon" [ngClass]="'file-' + getFileExtension(file.name)">
                  <i class="fas" [ngClass]="{
                    'fa-file-pdf': getFileExtension(file.name) === 'pdf',
                    'fa-file-word': getFileExtension(file.name) === 'doc' || getFileExtension(file.name) === 'docx',
                    'fa-file-excel': getFileExtension(file.name) === 'xls' || getFileExtension(file.name) === 'xlsx',
                    'fa-file-image': getFileExtension(file.name) === 'jpg' || getFileExtension(file.name) === 'png',
                    'fa-file': !['pdf', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'png'].includes(getFileExtension(file.name))
                  }"></i>
                </span>
                <span class="file-name" [title]="file.name">{{file.name}}</span>
                <span class="file-size">{{(file.size / 1024 / 1024).toFixed(2)}}MB</span>
              </div>
              <button type="button" class="btn btn-link btn-delete" (click)="removeFile(file)">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部状态信息 -->
    <div class="status-info">
      <div class="status-item">
        <span class="status-label">当前状态：</span>
        <span class="badge" [ngClass]="getStatusBadgeClass(allocationForm.get('status')?.value)">
          {{ allocationForm.get('status')?.value }}
        </span>
      </div>
      <div class="status-item">
        <span class="status-label">创建时间：</span>
        <span>{{ creationTime }}</span>
      </div>
    </div>
    <!-- 底部操作按钮 -->
    <div class="footer-actions">
      <button type="button" class="btn btn-primary btn-gradient" (click)="saveForm()">
        <i class="fas fa-save"></i> {{ isEditMode ? '保存修改' : '保存' }}
      </button>
      <button type="button" class="btn btn-secondary btn-gray" (click)="cancel()">
        <i class="fas fa-times-circle"></i> 取消
      </button>
    </div>
  </form>
  
  <!-- 产品选择弹框 -->
  <div class="modal" [class.show]="showProductModal" [style.display]="showProductModal ? 'block' : 'none'" tabindex="-1" style="z-index: 1050;">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加产品</h5>
          <button type="button" class="btn-close" (click)="closeProductModal()"></button>
        </div>
        <div class="modal-body">
          <!-- 搜索区域 -->
          <div class="row mb-3">
            <div class="col-md-4">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入产品编号/名称" [(ngModel)]="productSearchTerm">
                <button class="btn btn-outline-secondary" type="button" (click)="searchProducts()">查询</button>
                <button class="btn btn-outline-secondary" type="button" (click)="resetProductSearch()">重置</button>
              </div>
            </div>
            <div class="col-md-3">
              <select class="form-select" [(ngModel)]="selectedUnit">
                <option value="">请选择单位</option>
                <option value="瓶">瓶</option>
                <option value="包">包</option>
                <option value="袋">袋</option>
                <option value="盒">盒</option>
              </select>
            </div>
          </div>

          <!-- 产品列表 -->
          <div class="table-responsive">
            <table class="table table-bordered table-hover">
              <thead class="table-light">
                <tr>
                  <th style="width: 40px;">
                    <input type="checkbox" [checked]="isAllModalProductsSelected()" (change)="toggleSelectAllModalProducts($event)">
                  </th>
                  <th>序号</th>
                  <th>产品编号</th>
                  <th>产品名称</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>入库单价</th>
                  <th>库存</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngIf="productLoading">
                  <td colspan="8" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                      <span class="visually-hidden">加载中...</span>
                    </div>
                    <div class="mt-2">正在加载数据...</div>
                  </td>
                </tr>
                <tr *ngIf="!productLoading && modalProductList.length === 0">
                  <td colspan="8" class="text-center py-4 text-muted">
                    <i class="fas fa-inbox me-2"></i>暂无数据
                  </td>
                </tr>
                <tr *ngFor="let item of modalProductList; let i = index">
                  <td>
                    <input type="checkbox" [checked]="isModalProductSelected(item.id)" (change)="toggleSelectModalProduct(item.id)">
                  </td>
                  <td>{{ i + 1 }}</td>
                  <td>{{ item.productCode }}</td>
                  <td>{{ item.productName }}</td>
                  <td>{{ item.specification }}</td>
                  <td>{{ item.unit }}</td>
                  <td>{{ item.purchasePrice }}</td>
                  <td>{{ item.currentStock }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" (click)="closeProductModal()">取消</button>
          <button type="button" class="btn btn-primary" (click)="confirmAddProducts()">确认</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 模态框背景遮罩 -->
  <div class="modal-backdrop fade show" *ngIf="showProductModal" style="z-index: 1040;"></div>
</div> 